<template>
	<view class="index">
		<u-navbar title=" " left-icon=" " placeholder :bgColor="'transparent'" fixed :autoBack="true">
		</u-navbar>
		<view class="topimg_b">
			<image class="topimg" src="../../static/icon/my/topimg.png" mode="widthFix"></image>
		</view>
		<view class="my app-pages">
			<view class="my-title">
				<view class=" useravatar" width="80px" height="80px">
					<u--image :showLoading="true" src="/static/people.png" width="60px" height="60px"></u--image>
				</view>
				<view class="my-title-cotnent">
					<view class="my-title-text">
						<view class="username">{{userInfo.nickName || '游客'}}</view>
						<view style="margin-top: 20rpx;color: #fff;">{{userInfo.phone || '未获取电话'}}</view>
					</view>
					<u-icon @click="handleRouter('/myPages/setting/index')" name="setting-fill"
						color="#fff" size="50rpx"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="list-title">
					<view class="" style="font-size: 32rpx;font-weight: bold;">我的订单</view>
					<view class="list-arrow-right" @click="handleRouter('/myPages/myOrder/index?current=0')">
						<text>全部订单</text>
						<u-icon name="arrow-right" color="rgb(144, 147, 153)" size="20rpx"></u-icon>
					</view>
				</view>
				<view class="list-content">
					<view class="list-content-item" @click="handleRouter(item.path)" v-for="(item,index) in tabbar1"
						:key="index">
						<u--image :showLoading="true" :src="item.icon" width="80rpx" height="80rpx"></u--image>
						<text class="list-content-text">{{item.name}}</text>
					</view>
				</view>
				<!-- <view class="list-title" style="margin-top: 50rpx;">
					<view class="" style="font-size: 32rpx;font-weight: bold;">其它功能</view>
				</view> -->
			</view>
			<view class="list">
				<view class="cell">
					<view class="cell-item" v-for="(item,index) in tabbar2" :key="index"
						@click="handleRouter(item.path)">
						<view class="title"><image class="tab2_icon" :src="item.icon" mode=""></image> {{item.name}}</view>
						<u-icon name="arrow-right" color="#333333" size="28rpx"></u-icon>
					</view>
				</view>

			</view>
		</view>
		<empower @login-success="empowerSuccess" @cancel="empowerShow=false" v-if="empowerShow"></empower>
	</view>
</template>
<script>
	import empower from "@/components/empower";
	export default {
		name: 'My',
		components: {
			empower
		},
		data() {
			return {
				title: '',
				userInfo: {},
				empowerShow: false,
				content: '',
				phone: null,
				tabbar1: [{
						name: '待付款',
						icon: '/static/icon/my/dfk.png',
						path: '/myPages/myOrder/index?current=1'
					},
					{
						name: '待使用',
						icon: '/static/icon/my/dsh.png',
						path: '/myPages/myOrder/index?current=2'
					},
					{
						name: '已完成',
						icon: '/static/icon/my/dpj.png',
						path: '/myPages/myOrder/index?current=3'
					},
					{
						name: '已预约',
						icon: '/static/icon/my/yyy.png',
						path: '/myPages/myOrder/index?current=4'
					},
					{
						name: '退款/售后',
						icon: '/static/icon/my/tk.png',
						path: '/myPages/myOrder/index?current=0'
					},
				],
				tabbar2: [
					// {
					// 	name: '我的钱包',
					// 	path: '',
					// 	icon:'/static/icon/my/qb.png'
					// },
					// {
					// 	name: '消费记录',
					// 	path: '/myPages/consumptionLog/index',
					// 	icon:'/static/icon/my/xf.png'
					// },
					
					{
						name: '我的优惠卷',
						path: '/myPages/mySecurities/index',
						icon:'/static/icon/my/yhq.png'
					},
					{
						name: '我的发票',
						path: '/myPages/invoice/index',
						icon:'/static/icon/my/fp.png'
					},
					{
						name: '收货地址',
						path: '/myPages/address/index',
						icon:'/static/icon/my/dz1.png'
					},
					// {
					// 	name: '领券中心',
					// 	path: '/myPages/securities/index'
					// },
					// {
					// 	name: '意见反馈',
					// 	path: '/myPages/feedBack/index'
					// },
					
					// {
					// 	name: '我的收藏',
					// 	path: '/myPages/collection/index'
					// },
					// {
					// 	name: '我的餐卡',
					// 	path: '/myPages/myCard/index'
					// },
				]
			}
		},
		methods: {
			empowerSuccess() {
				this.userInfo = uni.getStorageSync('userInfo') || {};
				this.phone = uni.getStorageSync('phone');
				this.empowerShow = false;
			},
			handleRouter(url) {
				if (!this.userInfo || !this.userInfo.phone) return this.empowerShow = true;
				
				uni.navigateTo({
					url
				});
			}
		},
		onShow() {
			this.empowerShow = false;
			this.phone = uni.getStorageSync('phone');
			this.userInfo = uni.getStorageSync('userInfo') || {};
			if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
				this.$scope.getTabBar().setData({
					selected: 3
				})
			};
		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
	}
</style>

<style lang="scss" scoped>
	$fontcolor:#5A5A5A;

	.index {
		.topimg_b {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: -1;

			.topimg {
				width: 100%;
				display: block;
			}
		}
	}

	.my {

		.cell {
			.cell-item:first-child{
				margin-top: 0;
			}
			.cell-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 5px;

				.title {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					color: $fontcolor;
					
					.tab2_icon{
						width: 50rpx;
						height: 50rpx;
						display: block;
						margin-right: 20rpx;
					}
				}

				margin-top: 35rpx;
			}
		}

		.list {
			margin-bottom: 30rpx;
			background-color: #fff;
			border-radius: 22rpx;
			padding: 30rpx;

			.list-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;

				.list-content-item {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				}

				.list-content-text {
					font-size: 28rpx;
					margin-top: 15rpx;
					color: $fontcolor;
				}
			}

			.list-title {
				display: flex;
				justify-content: space-between;

				.list-arrow-right {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: $uni-text-color-grey;
				}
			}
		}


		.my-title {
			display: flex;
			align-items: center;
			margin: 50rpx 0;

			.useravatar {
				border-radius: 50%;
				overflow: hidden;
				
			}

			.my-title-cotnent {
				flex: 1;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.my-title-text {
					.username {
						font-size: 40rpx;
						font-weight: 600;
						color: #fff;
					}
				}
			}
		}
	}
</style>
